<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户列表</span>
      </div>
      <el-table :data="userData" stripe style="width: 100%">
        <el-table-column prop="uid" label="编号" width="180" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="userCode" label="账号" />
        <el-table-column prop="password" label="密码" />
        <el-table-column prop="userBirthday" label="出生日期" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="userDesc" label="个人简介" />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.uid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userData.length"
      >
      </el-pagination>
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="userForm"
        >
          <el-form-item label="用户名">
            <el-input v-model="userForm.username"></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="userForm.userCode"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="userForm.password"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="userForm.userBirthday"
              type="datetime"
              placeholder="出生日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            性别：
            <el-radio v-model="userForm.userGender" label="男">男</el-radio>
            <el-radio v-model="userForm.userGender" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="userForm.address"></el-input>
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input v-model="userForm.userDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { allUserrAPI, deleteUserAPI, updateUserAPI } from "@/api";
export default {
  name: "AdminUsercontrol",

  data() {
    return {
      userData: [],
      userForm: {
        uid: 0,
        username: "",
        userCode: "",
        userBirthday: "",
        userImg: "",
        password: "",
        userGender: "",
        identity: "普通用户",
        address: "",
        userDesc: "",
      },
      uid: parseInt(sessionStorage.getItem("uid")),
      labelPosition: "right",
      dialogTitle: "",
      dialogVisible: false,
      pageSize: 10,
      currentPage: 1,
    };
  },

  mounted() {
    this.getAllUsers();
  },

  methods: {
    handleEdit(row) {
      this.dialogVisible = true;
      this.dialogTitle = "用户编辑";
      this.userForm.uid = row.uid;
      this.userForm.username = row.username;
      this.userForm.userCode = row.userCode;
      this.userForm.password = row.password;
      this.userForm.userBirthday = row.userBirthday;
      this.userForm.address = row.address;
      this.userForm.userDesc = row.userDesc;
    },

    async submit() {
      if (this.userForm.uid > 0) {
        const updateRes = await updateUserAPI(this.userForm);
        if (updateRes.data.statusCode === 200) {
          this.$message({
            message: "编辑信息成功",
            type: "success",
          });
          this.getAllUsers();
          this.dialogVisible = false;
        }
      }
    },

    async handleDelete(id) {
      await deleteUserAPI(id);
      // console.log(delRes);
      this.getAllUsers();
    },
    async getAllUsers() {
      const allUserRes = await allUserrAPI(this.uid);
      this.userData = allUserRes.data.data;
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style scoped></style>
